<template>
	<div class="bgimg" :style="{ height: bodyHeight + 'px' }">
		<div class="reg">
			<van-nav-bar left-arrow @click-left="onClickLeft" @click-right="onClickRight">
				<span slot="right">
        我要注册
      </span>
			</van-nav-bar>
		</div>
		<div class="login">
			<div class="title">
				<van-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" round/>
			</div>
			<div class="main">
				<div class="text">
					<van-cell-group>
						<van-field v-model.trim="userName" clearable placeholder="请输入帐号" label="帐号" left-icon="contact" maxlength="20" />
					</van-cell-group>
				</div>
				<div class="text">
					<van-cell-group>
						<van-field v-model.trim="userPassword" clearable placeholder="请输入密码" label="密码" left-icon="smile-o" maxlength="20" type="password" />
					</van-cell-group>
				</div>
				<div class="btn">
					<van-button type="primary" @click.native="Login" :loading="loading">登录</van-button>
				</div>
				<div class="forget" @click="Forget">
					忘记密码?
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	let _this;
	export default {
		name: 'Login',
		components: {},
		props: {},
		data() {
			return {
				bodyHeight: '',
				userName: '',
				userPassword: '',
				loading: false
			};
		},
		beforeCreate() {
			_this = this;
		},
		watch: {
			userName: function() {
				this.userName = this.userName.replace(/[\u4e00-\u9fa5]/ig, ''); // 帐号不能输入中文
			},
			userPassword: function() {
				this.userPassword = this.userPassword.replace(/[\u4e00-\u9fa5]/ig, ''); // 密码不能输入中文
			}
		},
		computed: {},
		methods: {
			Login() {
				if(!this.userName) {
					this.$toast('帐号不能为空');
					return false;
				} else {
					if(this.userName.length < 4 || this.userName.length > 20) {
						this.$toast('帐号长度在4到20位之间');
						return false;
					}
				}
				if(!this.userPassword) {
					this.$toast('密码不能为空');
					return false;
				} else {
					if(this.userPassword.length < 6 || this.userPassword.length > 20) {
						this.$toast('密码长度在6到20位之间');
						return false;
					}
				}
				this.loading = true;
				setTimeout(() => {
					this.loading = false;
					this.$toast('登录成功');
					this.$nextTick(() => {
						this.$router.push({
							path: '/'
						});
					});
				}, 1000);
			},
			onClickLeft() {
				this.$router.push({
					path: '/'
				});
			},
			onClickRight() {
				this.$toast('暂时没有注册页');
			},
			Forget() {
				this.$toast('暂时没有忘记密码页');
			}
		},
		created() {},
		mounted() {
			this.bodyHeight = document.documentElement.clientHeight;
		},
		destroyed() {

		},
		filters: {}
	};
</script>

<style lang="less" scoped>
	.reg /deep/ .van-nav-bar {
		background-color: transparent;
	}
	
	.reg /deep/ .van-nav-bar__left,
	.van-nav-bar__right {
		color: white;
	}
	
	.reg /deep/ .van-nav-bar .van-icon {
		color: white;
	}
	
	.reg /deep/ .van-hairline--bottom::after {
		border: 0;
	}
	
	.bgimg {
		height: 100%;
		background: url('../assets/images/bg.jpg') no-repeat left top;
		background-size: cover;
	}
	
	.title {
		text-align: center;
		font-size: 26px;
		color: white;
		margin: 0 auto;
		margin-top: 100px;
	}
	
	.main {
		position: relative;
		padding: 30px 20px;
	}
	
	.text {
		padding-bottom: 20px;
	}
	
	.btn .van-button--normal {
		width: 100%;
	}
	
	.text /deep/ .van-cell {
		background-color: transparent;
	}
	
	.text /deep/ .van-cell-group {
		background-color: transparent;
	}
	
	.text /deep/ .van-field__left-icon .van-icon,
	.van-field__right-icon .van-icon {
		color: white;
	}
	
	.text /deep/ .van-field__label {
		color: white;
	}
	
	.text /deep/ .van-field__control {
		color: white;
	}
	
	.text /deep/ .van-cell {
		padding: 10px 60px;
	}
	
	.text /deep/ .van-field__label {
		width: 60px;
	}
	
	.text /deep/ .van-hairline--top-bottom::after,
	.van-hairline-unset--top-bottom::after {
		border: 0;
	}
	
	.forget {
		font-size: 13px;
		float: right;
		color: white;
		padding-top: 20px;
	}
</style>